<template>
	<div class="withdrawals_wrp">
		<!--警告-->
		<div class="Notice sm_font" v-show="warning">
			注意：提现金额一次必须大于1元（暂不支持兴业银行）
		</div>
		<div class="all">
			<div class="content">
				<div class="card">
					<b class="md_s_font color_gray_02 addCard" v-if="!hasCard"  @click="addCard">添加银行卡提现</b>
					<p class="md_s_font color_gray_02 hasCard" v-else>
						<span class="color_gray_02"><b>{{cardInfo.cardName}}</b></span>
						<span class="color_gray_03">（尾号 {{cardInfo.endNo}}）</span>
					</p>
				</div>
				<div class="amountMoney md_s_font color_gray_02">
					<div class="amountMoney_input">
					<div>提现金额</div>
					<div><b>￥</b>
						<input type="text" v-model="amount_entered" @focus="KeyWords"/>
						<key-board ref="keyBoard" @keyboardClick="keyboardClick"/>
					</div>
					<div class="clearX" v-if="amount_entered" @click="clearAmount_entered">
					</div>
				</div>
				<div class="amountMoney_btn">
					<div class="amountMoney_btn_content">
						<div class="amountMoney_btn_floatLeft" v-if="verifyTotal">可提现金额 {{total}}元</div>
						<div class="amountMoney_btn_floatLeft" style="color: red;" v-else>账户余额不足</div>
						<div class="amountMoney_btn_floatRight color_red" @click="allTotal">全部提现</div>
					</div>
					<div class="withdrawals_btn" :class="{'gray_btn':!nextStep, 'next_step_btn': nextStep}" @click="next_step_btn">确定</div>
				</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui';
	import {queryCard, withdrawals} from 'src/service/getData3.js'
	import {Storage} from 'src/utils/storage.js'
	import {mapGetters} from 'vuex';

	export default{
		data: () => ({
			warning: true, // 提醒金额大于20提醒
			amount_entered: '', // 输入提现金额
			total: 0, // 用户账户总金额
			hasCard: false, // 判断是否有绑卡
			cardInfo: '' // 银行卡信息
		}),
		watch: {
			amount_entered(newVal){
				console.log(this.usrId)
				if (newVal >=1) {
					this.warning = false
				} 
				else {
					this.warning = true
				}
			}
		},
		computed: {
			nextStep() { 
				return !this.warning && this.hasCard && this.verifyTotal
			},
			verifyTotal() {
				return this.amount_entered <= this.total
			},
			...mapGetters(['usrId'])
		},
		created: async function(){
			this.$emit('header-info', {
			  title:'提现',
			  isBack: true,
			  isMessage: false
			})
			let res = await queryCard(this.usrId)
			if (res.respCode === '00') {
				this.hasCard = true
				this.cardInfo = res.content
			} else {
				this.hasCard = false
			}
			this.total = Storage.get('total', true)
		},
		methods:{
			addCard(){
				if(!this.hasCard){
					this.$router.push({path: '/addBankCard'})
				}				
			},
			KeyWords(e) {
				// 阻止默认键盘弹出
				document.activeElement.blur();
				this.$refs.keyBoard.keyboardToggle(true)
				e.stopPropagation()
			},
			keyboardClick(words) {
				this.amount_entered = words
			},
			clearAmount_entered() {
				this.amount_entered = ''
				this.$refs.keyBoard.num = ''
			},
			closeKeyWords() {
				this.$nextTick(() => {
					if (this.$refs.keyBoard.keyBoardShow) {
						this.$refs.keyBoard.keyboardToggle(false)
					}
				})
			},
			allTotal() {
				this.amount_entered = this.total
				this.$refs.keyBoard.num = this.total
			},
			async next_step_btn() {
				this.closeKeyWords()
				if (this.nextStep) {
					this.$store.commit('changeState', true)
					try {
						let res = await withdrawals({
							usrId: this.usrId,
							amt: this.amount_entered
						})
						if (res.respCode === '00') {
							this.$store.commit('bindCardState', {
								money: this.amount_entered,
								cardInfo: this.cardInfo,
								status: res.content.state
							})
							this.$router.push({path:'/presentResults'})
							return
						} else {
							throw new Error(res.errorInfo);
						}
					} catch (e) {
						if (e) {
							Toast({
								message: e.message,
								duration: 1000
							})
						}
					}
				} else {
					if (!this.hasCard) { // 未绑卡
						Toast({
							message: '请先添加银行卡！',
							duration: 1000
						})
					}
				}
			}
		},
		beforeRouteLeave(to, from, next){
			if (this.hasCard) {
				next()
				this.$route.push({name: 'wallet'})
			} else {
				next()
			}
		},
		beforeRouteEnter (to, from, next) {
				 if(from.path === '/presentResults'){
				 	next({name: 'wallet'})
				 }else{
				 	next()
				 }
				}
	}
</script>

<style lang="scss"  scoped>
	@mixin background_bg($size, $sit) {
		background-repeat: no-repeat;
		background-size: $size;
		background-position: $sit;
	}
	.withdrawals_wrp {
		padding-top: 2rem;
		position: relative;
	}
	.Notice{
		position: absolute;
		top:0;
		width: 100%;
		height: 2rem;
		background: #fcf2b7;
		line-height: 2rem;
		text-indent: 1rem;
		padding-left: 2rem;
		background-image: url('../../../images/zhuyi.png');
		@include background_bg(auto 1.2rem, 1rem center);
	}
	.all{
		width: 100%;
		height: 100%;
		 padding: 1rem;
	}
	.content{
		width: 100%;
		height: 50%;
		background: white;
	}
	.card{
		width: 100%;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
		line-height: 3.3rem;
	}
	.addCard {
		display: block;
		background-image: url('../../../images/addCard.png');
		@include background_bg(auto 1.8rem, 1rem center);
		padding-left: 4rem;
	}
	.hasCard {
		padding-left: 1rem;
		&::after {
			content: '';
			display: block;
			clear: both;
		}
	}
	.hasCard>span{
		height: 3rem;
		position: relative;
		float: left;
	}
	.bank_icon {
		width:16%;
	}
	.bank_icon > i{
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: inline-block;
		overflow: hidden;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.hasCard span img {
		max-width: 100%;
	}
	.addCard::after {
		content: '';
		display: block;
		position: absolute;
		background-image: url('../../../images/arrows.png');
		@include background_bg(contain, center);
		height: 1rem;
		width: 1rem;
		top: 50%;
		transform: translateY(-50%);
		right: 1rem;
	}
	.amountMoney{
		width: 100%;
		height: 40%;
		padding: 1rem;
		position: relative;
	}
	.amountMoney_input{
		width: 100%;
		height: 5.6rem;
		border-bottom: 1px solid #f5f5f5;
	}
	.amountMoney_input>div:nth-of-type(1){
		margin-bottom: 1rem;
	}
	.amountMoney_input b{
		font-size: 1.8rem;
		color: black;
	}
	.amountMoney_input input{
		width: 60%;
		font-size: 1.7rem;
	}
	.clearX{
		width: 1.5rem;
		position: absolute;
		right: 4rem;
		top: 4rem;
		background: url('../../../images/X.jpg');
		@include background_bg(contain, center);
		width: 1.4rem;
		height: 1.4rem;
	}
	.amountMoney_btn{
		width: 100%;
		height: 8rem;
		overflow: hidden;
	}
	.amountMoney_btn_content{
		height: 4rem;
	}
	.amountMoney_btn_floatLeft{
		float: left;
		margin-top: 1rem;
	}
	.amountMoney_btn_floatRight{
		float: right;
		margin-top: 1rem;
	}
	.withdrawals_btn{
		width: 100%;
		// margin-top: 5rem;
		text-align: center;
		line-height: 3rem;
		border-radius: .3rem;
	}
	.gray_btn {
		background-color: #ccc;
	}
	.next_step_btn {
		background-color: #eb4e89;
		color: #fff;
	}
</style>
